<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>学生成绩管理系统登录</title>
  <!-- 引入Element UI CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入Vue和Element UI JS -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 引入异步请求模块 -->
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <style>
    .box-card {
      width: 480px;
      margin: 0 auto;
      /* 设置背景透明度 */
      background-color: rgba(255, 255, 255, 0.5);
    }
    /* body {
      background-image:url("https://bpic.588ku.com/back_pic/05/96/55/935dc6d7ae745aa.jpg");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    } */
     body{
      margin: 0;
      padding: 0;
      overflow: hidden;/* 隐藏滚动条 */
     
     }
    #登录{
      background-color: #006aff;
      /* 文字颜色 */
      color: #fff;
    }
    #重置{
      background-color: #9c9c9c;
      color: #fff;
    }
 
    video {
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      object-fit: cover;
      z-index:-100;
      transition: opacity 1s ease-in-out;
    }

    #系统标题{
      /* 设置相对父容器居中 */
      position: relative;
      left: 110px;
      /* 文字加粗 */
      font-weight: bold;
      /* 楷体 */
      font-family: '楷体';
      font-size: 40px;
    }

  </style>
</head>

<video id="myVideo" autoplay  muted>
  <source id="videoSource" src="./video/登录.mp4" type="video/mp4"></source>
</video>
<script>
const video = document.getElementById('myVideo');
video.addEventListener('ended', function() {
  video.currentTime = 0;
  video.play();
});

</script>


<body >
  <div id="app">
    <el-card class="box-card" style="width: 480px; margin: 15% auto;">
      <div slot="header" class="clearfix">
        <span>登录</span>
        <!-- 展示学生成绩管理系统文字 -->
        <span id="系统标题" style=" font-size: 20px;">学生成绩管理系统</span>
      </div>
      <el-form :model="form" :rules="rules" ref="loginForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="form.role" placeholder="请选择角色" id="videoSelector">
            <el-option label="学生" value="1"></el-option>
            <el-option label="教师" value="2"></el-option>
            <el-option label="管理员" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="display: flex; align-items: flex-end;">
          <el-button id="登录" type="button" @click="submitForm('loginForm')">登录</el-button>
          <el-button id="重置" @click="resetForm('loginForm')">重置</el-button>
          <a href="javascript:void(0)" @click="gotoRegister" 
             style="margin-left: 15px; color: #409EFF; font-size: 14px; margin-bottom: 0px;">
             注册
          </a>
        </el-form-item>
      </el-form>
    </el-card>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          form: {
            username: '',
            password: '',
            role: ''
          },
          rules: {
            username: [
              { required: true, message: '请输入用户名', trigger: 'blur' }
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' }
            ],
            role: [
              { required: true, message: '请选择角色', trigger: 'change' }
            ]
          }
        };
      },
      methods: {
    submitForm(formName) {
    this.$refs[formName].validate((valid) => {
      if (valid) {
        axios({
                url:'http://localhost:8080/login',
                method:'post',
                data: this.form,  //post请求的参数需要写到data中
            }) 
          .then(response => {
            // 假设后端返回的数据结构如下:
            // { success: true, message: '登录成功' }
            if (response.data.success) {
             // 将后端返回的用户信息保存到本地存储中


              if (this.form.role === '1') {
                localStorage.setItem('userStudentInfo', JSON.stringify(response.data.data));
                // 重定向到学生界面
                window.location.href = './student/firstpage.html';                
                
              } else if (this.form.role === '2') {
                localStorage.setItem('userTeacherInfo', JSON.stringify(response.data.data));
                window.location.href = './teacher/teacher.html';
             
              } else if (this.form.role === '3') {
                localStorage.setItem('userAdminInfo', JSON.stringify(response.data.data));
                window.location.href = '/student/firstpage.html';
              
              }
            } else {
              alert(response.data.message || '登录失败,请检查用户名或密码');
            }
          })
          .catch(error => {
            console.error('登录请求失败:', error);
            alert('登录请求失败，请稍后再试');
          });
      } else {
        console.log('登录验证失败');
        return false;
      }
    });
  },
  resetForm(formName) {
    this.$refs[formName].resetFields();
    
  },
  // 跳转到注册页面
  gotoRegister() {
      window.location.href = './register.html'; 
  }
}
    })


  </script>

</body>

</html>